import {
  DocumentBulletListMultiple20Filled,
  MoreHorizontal16Filled,
} from "@vicons/fluent";
import {
  NCard,
  NButton,
  NDivider,
  NSpace,
  NIcon,
  NAvatar,
  NTag,
  NDropdown,
} from "naive-ui";
import PageScroll from "@/components/pageScroll";

export default defineComponent({
  name: "Document",
  setup() {
    let handleFilter = (type: number) => {
      filterAction.value = type;
    };
    let filterAction = ref(1);
    const ropdownOption: { [key: string]: any } = reactive({
      isShowOpdown: false,
      x: 0,
      y: 0,
      options: [
        {
          label: "管理员",
          key: "管理员",
        },
        {
          label: "普通管理员",
          key: "普通管理员",
        },
        {
          label: "客服",
          key: "客服",
        },
        {
          label: "调度",
          key: "调度",
        },
      ],
      colors: {
        管理员: "#18A058",
        普通管理员: "#ff69b4",
        客服: "#4395FF",
        调度: "#F0A020",
      },
    });

    const handleOption = (e: MouseEvent) => {
      ropdownOption.isShowOpdown = false;
      nextTick().then(() => {
        ropdownOption.isShowOpdown = true;
        ropdownOption.x = e.clientX;
        ropdownOption.y = e.clientY;
      });
    };
    return () => (
      <div class=" h-full flex overflow-hidden">
        <PageScroll>
          <div class="sticky top-0 z-10 pl-3 pr-3">
            <NCard
              bordered={false}
              contentStyle={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px 0",
              }}
            >
              <NSpace align="center">
                <NButton
                  strong
                  size="small"
                  onClick={() => {
                    handleFilter(1);
                  }}
                  type={filterAction.value == 1 ? "primary" : "default"}
                >
                  最近更新
                </NButton>
                <NButton
                  strong
                  size="small"
                  onClick={() => {
                    handleFilter(2);
                  }}
                  type={filterAction.value == 2 ? "info" : "default"}
                >
                  最近浏览
                </NButton>
                <NButton
                  strong
                  secondary
                  size="small"
                  onClick={() => {
                    handleFilter(3);
                  }}
                  type={filterAction.value == 3 ? "info" : "default"}
                >
                  全部
                </NButton>
                <span class=" text-xs opacity-90">3个文档</span>
              </NSpace>
              <NButton type="primary" size="small">
                新增文档
              </NButton>
            </NCard>
            <NDivider style="margin:0;" />
          </div>
          <div class="p-3 pb-0">
            {new Array(10).fill(1).map((item) => {
              return (
                <dl class="cursor-pointer mb-5">
                  <dt class="flex items-start relative">
                    <NIcon
                      size="20"
                      color="#7399DD"
                      style={{
                        transform: "translate(0px, 2px)",
                      }}
                      component={DocumentBulletListMultiple20Filled}
                    />
                    <span class="ml-2 font-bold mr-5 pr-5">
                      自学设计的话，看过《给大家看的设计书》以后，想在深入一些，还应该看些什么？
                      自学设计的话，看过《给大家看的设计书》以后，想在深入一些，还应该看些什么？
                      自学设计的话，看过《给大家看的设计书》以后，想在深入一些，还应该看些什么？
                    </span>
                    <div class=" absolute right-1 top-0">
                      <NButton text onClick={(e) => handleOption(e)}>
                        {{
                          icon: () => {
                            return <NIcon component={MoreHorizontal16Filled} />;
                          },
                        }}
                      </NButton>
                    </div>
                  </dt>
                  <dd class=" text-xs mt-3 pl-7 flex items-center">
                    <NSpace>
                      <NTag size="small" type="success">
                        自学审计
                      </NTag>
                      <NTag size="small" type="success">
                        产品经理线上课程
                      </NTag>
                    </NSpace>
                  </dd>
                  <dd class=" text-xs mt-3 pl-7 flex items-center">
                    <NAvatar
                      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                      round
                      size={20}
                    />
                    <span class="ml-3 opacity-75">
                      陌上花开早更新于 2019-08-01 20:45:21
                    </span>
                  </dd>
                  <NDivider style="margin:10px;" />
                </dl>
              );
            })}
          </div>
        </PageScroll>
        <NDropdown
          placement="right-start"
          trigger="manual"
          x={ropdownOption.x}
          y={ropdownOption.y}
          onClickoutside={() => {
            ropdownOption.isShowOpdown = false;
          }}
          options={ropdownOption.options}
          show={ropdownOption.isShowOpdown}
        />
      </div>
    );
  },
});
